import classNames from 'classnames'
import React, { useState, useEffect, useRef } from 'react'

import styles from './index.module.scss'
export default function Textarea({
  maxLength = 100,
  className,
  value,
  onChange,
  ...rest
}) {
  const [content, setContent] = useState(value || '')
  const texRef = useRef(null)
  useEffect(() => {
    texRef.current.focus()
    texRef.current.setSelectionRange(-1, -1)
  }, [])
  const handleChange = (e) => {
    setContent(e.target.value)
    // onChange && onChange(e.target.value)
    onChange && onChange(e)
  }
  return (
    <div className={styles.root}>
      {/* 文本输入框 */}
      <textarea
        ref={texRef}
        {...rest}
        className={classNames('textarea', className)}
        maxLength={maxLength}
        value={value}
        onChange={handleChange}
      />

      {/* 当前字数/最大允许字数 */}
      <div className="count">
        {content.length}/{maxLength}
      </div>
    </div>
  )
}

// import React, { useState } from 'react'
// import classNames from 'classnames'
// import styles from './index.module.scss'

// export default function Textarea({ maxLength, className, onChange, ...rest }) {
//   const [value, setValue] = useState(rest.value || '')
//   const handleChange = (e) => {
//     console.log(e.target)
//   }
//   return (
//     <div className={styles.root}>
//       <textarea
//         {...rest}
//         onChange={(e) => handleChange(e)}
//         className={classNames('textarea', className)}
//       >
//         123
//       </textarea>
//       <div className="count">
//         {1}/{maxLength}
//       </div>
//     </div>
//   )
// }
